<template>
  <div class="work-detail-container">
    <a-row type="flex" justify="center" v-if="template">
      <a-col :span="8" class="cover-img">
        <img alt="慕课乐高" src="../assets/logo2.png" id="logo-img" />
        <a :href="template.coverImg"
          ><img :src="template.coverImg" alt="" id="cover-img"
        /></a>
      </a-col>
      <a-col :span="8">
        <h2>{{ template.title }}</h2>
        <p>{{ template.desc }}</p>
        <div class="author">
          <a-avatar>V</a-avatar>
          该模版由 <b>{{ template.author }}</b> 创作
        </div>
        <div class="bar-code-area">
          <span>扫一扫，手机预览</span>
          <canvas id="barcode-container"></canvas>
        </div>
        <div class="use-button">
          <router-link to="/editor">
            <a-button type="primary" size="large"> 使用模版 </a-button>
          </router-link>
          <a-button size="large" @click="download"> 下载图片海报 </a-button>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { GlobalDataProps } from '../store/index';
import { TemplateProps } from '../store/templates';
import { baseH5URL } from '../main';
import { downloadImqge, generateQRCode } from '../helper';
export default defineComponent({
  setup() {
    const route = useRoute();
    const store = useStore<GlobalDataProps>();
    const currentId = route.params.id as string;
    const template = computed<TemplateProps>(() =>
      store.getters.getTemplateById(parseInt(currentId))
    );
    const channelURL = computed(
      () => `${baseH5URL}/aip/pages/${template.value.id}-${template.value.uuid}`
    );
    onMounted(async () => {
      await store.dispatch('fetchTemplates', { urlParams: { id: currentId } });
      await nextTick();
      await generateQRCode('barcode-container', channelURL.value, 150);
    });
    const download = () => {
      downloadImqge(template.value.coverImg);
      // const image = document.getElementById('cover-img') as HTMLImageElement;
      // downloadImqge(image.src, 'test.png')
      // // 创建链接
      // const link = document.createElement('a');
      // // 设置链接属性
      // link.href = image.src;
      // link.download = 'test.png';
      // link.rel = 'noopener';
      // // 触发事件
      // link.dispatchEvent(new MouseEvent('click'));
    };

    return {
      route,
      template,
      download,
    };
  },
});
</script>

<style scoped>
.work-detail-container {
  margin-top: 50px;
}
.cover-img {
  margin-right: 30px;
}
.cover-img img {
  width: 100%;
}
.use-button {
  margin: 30px 0;
}
.ant-avatar {
  margin-right: 10px;
}
.bar-code-area {
  margin: 20px 0;
}
#barcode-container {
  display: block;
}
</style>
